<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>元素的遍历</title>
		<!-- 元素遍历：用于DOM树中遍历元素【理解：元素嵌套，父子级】
		     children()       功能：获取匹配元素集合中每个元素的子元素
			 parent()        功能：获取匹配元素集合中每个元素的父元素
			 
			 sibling()     功能：获取匹配元素集合中每个元素的所有兄弟元素
			 
			 next()       功能：获取匹配元素集合中每个元素下一个兄弟元素
			 prev()      功能：获取匹配元素集合中每个元素的上一个兄弟元素
			 
			 each()    功能：遍历匹配元素的集合--遍历所有子元素
			           语法糖：each(function(index,element){})
					     index:下标   element:元素  形参 
		 
		 -->
	</head>
	<style>
		
	</style>
	<body>
		<!-- heml div.container 父级  6个div.box  每个#box1  子集
		          6个按钮
				  
			css: .container添加样式  边框1px  内外边距10px
				.box添加样式        背景颜色、内外边距10px
			jq:  引入
				
				
		 -->
		 <div class="container">
		         <div id="box1" class="box">Box 1</div>
		         <div id="box2" class="box">Box 2</div>
		         <div id="box3" class="box">Box 3</div>
		         <div id="box4" class="box">Box 4</div>
		         <div id="box5" class="box">Box 5</div>
		         <div id="box6" class="box">Box 6</div>
		     </div>
		 <button id="gc">获取子元素</button>
		 <button id="gp">获取父元素</button>
		 <button id="gs">获取兄弟元素</button>
		 <button id="gn">获取下一个兄弟元素</button>
		 <button id="gr">获取上一个兄弟元素</button>
		 <button id="loop">遍历元素</button>
		 <script>
			 /* 1.点击获取子元素 按钮 实现.container下所有子元素添加背景色
			 */
			$("#gc").click(function(){
				//通过 父找子 函数
				%(".container").children().css("background-color","#ff0");
			});
	     /* 2.点击 获取父元素 实现.container 添加背景色 */
			  $("#gp").click(function () {
			    $(".box").parent().css("background-color", "#f00");
			});
	/*   3.点击  获取兄弟元素 按钮 实现除了 #box4 字体颜色不变，其他变色*/
	         $("#gs").click(function () {
	            $("#box4").siblings().css("color", "#0f0");
	        });
  /*   4.点击 获取下一个兄弟元素  按钮 实现 #box6 下一个兄弟,添加背景色*/
             $("#gn").click(function () {
                $("#box6").next().css("background-color", "#0ff");
            });
/*   5.点击 获取下一个兄弟元素 按钮 实现 #box6 上一个兄弟,添加背景色
		                                          圆、背景图、背景色、盒子阴影*/ 
			 $("#gr").click(function () {
			            $("#box6").prev().css({
							"width":"100px",
							"height":"100px",
			                "background-color": "#55ff00",
			                "border-radius":"50%",
			                "background-image":"url('..img/1.png')",
			                "box-shadow":"5 5 10px #000",
							"background-size":"100px",
							""
			            });
			        });		
			$("#loop").click(function(){
				$(".box").each(function)
			});
		 </script>
	</body>
</html>